<template>
    <el-scrollbar height="85vh" :style="{ left: props.isCollapsed ? '135px' : '320px', width:props.isCollapsed ? 'calc(98% - 135px)' : 'calc(98% - 320px)', transformOrigin: 'left center', transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)' }">
        <div class="content-box">
            <div class="top-box">
                <div class="left">
                    <img src="@/assets/avatar.png" alt="">
                    <div class="user-box">
                        <span>您好！刘莹昕教师</span>
                        <span>教师是灵魂的灯塔，照亮学子前行的道路。</span>
                    </div>
                </div>
                <div class="right">
                    <div class="renke">
                        <img :src="rkTeacher" alt="">
                        <span class="teacher-title">任课讲师</span>
                        <span class="teacher-subtitle">负责讲授课程</span>
                    </div>
                    <div class="lines"></div>
                    <div class="renke">
                        <img :src="hdTeacher" alt="">
                        <span class="teacher-title">班主任</span>
                        <span class="teacher-subtitle">负责管理班级</span>
                    </div>
                    <div class="lines"></div>
                    <div class="renke">
                        <img :src="zzTeacher" alt="">
                        <span class="teacher-title">专职导师</span>
                        <span class="teacher-subtitle">负责管理学生</span>
                    </div>
                </div>
            </div>
            <div class="banner-box">
                <img src="@/assets/banner.png" alt="">
            </div>
            <div class="board-box">
                <div class="titles">答疑留言板</div>
                <div class="board-content">
                    <div class="left">
                        <div class="tab-title">
                            <span class="left">课程留言</span>
                            <span class="right"> 查看更多 <el-icon size="14"><ArrowRightBold /></el-icon> </span>
                        </div>
                        <div class="board-list">
                            <div class="board-item">
                                <div class="left-item">
                                    <img src="@/assets/one.png" alt="">
                                    <div class="item-content">课程留言内容占位课程留言内容占位课程留言内容占位课程留言内容占位课程留言内容占位课程留言内容占位</div>
                                </div>
                                <div class="item-times">2024-10-03</div>
                            </div>
                            <div class="board-item">
                                <div class="left-item">
                                    <img src="@/assets/two.png" alt="">
                                    <div class="item-content">课程留言内容占位课程留言内容占位课程留言内容占位课程留言内容占位课程留言内容占位课程留言内容占位</div>
                                </div>
                                <div class="item-times">2024-10-03</div>
                            </div>
                            <div class="board-item">
                                <div class="left-item">
                                    <img src="@/assets/three.png" alt="">
                                    <div class="item-content">课程留言内容占位课程留言内容占位课程留言内容占位课程留言内容占位课程留言内容占位课程留言内容占位</div>
                                </div>
                                <div class="item-times">2024-10-03</div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="tab-title">
                            <span class="left">班级留言</span>
                        </div>
                        <div class="board-list">
                            <div class="nodata">
                                <img src="@/assets/empty.png" alt="">
                                <span>还没有班级留言</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup>
    import { ref,defineProps } from 'vue'
    import { ArrowRightBold } from '@element-plus/icons-vue'
    const rkTeacher = ref(require( '@/assets/2.png'));
    const hdTeacher = ref(require( '@/assets/0.png'));
    const zzTeacher = ref(require( '@/assets/4.png'));
    const props = defineProps({ 
        isCollapsed: { type: Boolean, default: false },
    })
</script>
<style scoped>
    .el-scrollbar{ position: absolute;top: 95px;left: 320px; }
    .content-box{width: 100%;padding-bottom: 30px;}
    .top-box{height: 150px;background: #fff;border-radius: 8px;display: flex;flex-direction: row;justify-content: space-between;;}
    .top-box .left{display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: 20%;height: 100%;padding-left: 60px;}
    .top-box .left img{width: 120px;height: 120px;}
    .top-box .left .user-box{display: flex;flex-direction: column;align-items:start;margin-left: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .top-box .left .user-box span:first-child{font-weight: 600;font-size: 20px;}
    .top-box .left .user-box span:last-child{margin-top: 10px;font-size: 16px;}
    .top-box .right{display: flex;flex-direction: row;align-items: center;margin-right: 50px;}
    .top-box .right .renke{display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;gap: 3px;}
    .top-box .right .renke img{width: 40px;}
    .top-box .right .renke .teacher-title{color: #3272F3;font-size: 18px;font-weight: 600;}
    .top-box .right .renke .teacher-subtitle{color: #3272F3;font-size: 18px;font-weight: 400;}
    .top-box .right .lines{background: #3272F3;height: 70%;width: 2px;margin-left: 30px;margin-right: 30px;border-radius: 5px;}
    .banner-box{width: 100%;margin-top: 25px;height: 550px;}
    .banner-box img{width: 100%;height: 100%;}
    .board-box{width: 100%;min-height: 400px;background: #DCE9FB;margin-top: 25px;border-radius: 8px;padding-bottom: 30px;}
    .board-box .titles{color: #1D173E;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 26px;font-weight: 600;padding-top: 30px;}
    .board-box .board-content{display: flex;flex-direction: row;justify-content: space-around;margin-top: 30px;}
    .board-box .board-content .left{width: 45%;background: #fff;border-radius: 8px;margin-left: 30px;}
    .board-box .board-content .tab-title{display: flex;flex-direction: row;justify-content: space-between;padding: 20px;}
    .board-box .board-content .tab-title .left{font-size: 20px;font-weight: 600;color: #1D173E;text-align: left;padding-left: 20px;}
    .board-box .board-content .left .tab-title .right{font-size: 20px;font-weight: 400;color: #A5A5A6;text-align: left;padding-left: 20px;text-align: right;margin-right: 20px;cursor: pointer;}
    .board-list{width: 92%;margin: 0 auto;padding-bottom: 30px;}
    .board-list .board-item{display: flex;flex-direction: row;align-items: center;justify-content: space-between;height: 40px;background: #E7EFFF;margin-top: 10px;padding-left: 10px;cursor: pointer;}
    .board-list .board-item .left-item{display: flex;flex-direction: row;align-items: center;justify-content: start;width: 80%;}
    .board-list .board-item .left-item .item-content{margin-left: 10px;width: 70%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;}
    .board-list .board-item .left-item img{width: 30px;}
    .board-list .board-item .item-times{margin-right: 20px;width: 15%;font-size: 14px;}
    .board-box .board-content .right{width: 45%;background: #fff;border-radius: 8px;margin-right: 30px;}
    .board-box .board-content .right .nodata{display: flex;flex-direction: column;align-items: center;}
    .board-box .board-content .right .nodata img{width:150px;height: 150px;}
    .board-box .board-content .right .nodata span{font-weight: 400;font-size: 18px;color: #A5A5A6;margin-top: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;}
</style>